<template>
	<view class="add_box">
		<block v-if="!boxHide">
			<image class="info_logo" :src="info.headimg" @click="addHeader" mode="aspectFill"></image>
			<!-- <view class="info_title">{{info.nickname}}</view> -->
			<view class="info_prompt">{{identityList[info.branch_type - 1]}}</view>

			<view class="add_item">
				<view>姓名</view>
				<input type="text" placeholder="请输入姓名" v-model="info.nickname" />
			</view>
			<view class="add_item">
				<view>性别</view>
				<view class="add_sex">
					<text :class="info.sex == 1 ? 'active' : ''" @tap="setSex(1)">男</text>
					<text :class="info.sex == 2 ? 'active' : ''" @tap="setSex(2)">女</text>
				</view>
			</view>
			<view class="add_item">
				<view>手机号</view>
				<input type="text" placeholder="请输入手机号" v-model="info.mobile" />
			</view>

			<view class="save" @tap="save()">保存</view>

			<view class="save returnBtn" @click.stop="returnLogin()">退出登录</view>
		</block>
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				boxHide: true,
				identityList: ['主管', '员工'],
				info: {}
			}
		},
		onShow() {
			if (this.boxHide) {
				this.$refs.load.initLoading({
					loadType: 1,
					loadPrompt: false
				}).then(res => {
					this.boxHide = false;
					this.$api.getUserInfo({
						user_id: uni.getStorageSync("userId")
					}).then(res => {
						this.info = res;
						this.$refs.load.getLoadingData({}).then(res => {

						})
					})
				})
			}
		},
		methods: {
			returnLogin() {
				uni.showModal({
					title: '提示',
					content: '你确定退出登录?',
					success(res) {
						if (res.confirm) {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					}
				});
			},
			addHeader() {
				let that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						that.$api.uploadFile(res.tempFilePaths).then(res => {
							that.info.headimg = res[0];
						})
					}
				})
			},
			setSex(index) {
				this.info.sex = index;
			},
			save() {
				if (this.info.nickname.length == 0) {
					this.$api.prompt("用户名不能为空")
				} else if (this.info.mobile.length != 11) {
					this.$api.prompt("手机号格式错误")
				} else {
					this.$api.editUserInfo(this.info)
				}
			}
		}
	}
</script>

<style>
	.info_logo {
		width: 143upx;
		height: 143upx;
		margin: 50upx 0 0 304upx;
		background: #EEEEEE;
		border-radius: 50%;
	}

	.info_title {
		text-align: center;
		line-height: 100upx;
		font-size: 36upx;
		color: #333333;
	}

	.info_prompt {
		text-align: center;
		color: #9BA7B7;
		font-size: 28upx;
	}

	.returnBtn {
		background: transparent;
		color: #333;
		border: 1rpx solid #999;
	}
</style>
